<template>
    <el-dialog v-model="dialogVisible" :close-on-click-modal="false" :close-on-press-escape="false" @close="closeDialog" >
        <el-table :data="params.data" border v-loading="loading" >
            <el-table-column type="index" label="序号" align="center" width="80" />
            <el-table-column :property="params.propField" :label="params.propName" align="center" />
            <el-table-column label="操作状态" align="center" >
                <template #default="{ row, $index }" >
                    <div>{{ row.status }}</div>
                </template>
            </el-table-column>
            <el-table-column label="失败原因" align="center" >
                <template #default="{ row, $index }" >
                    <div>{{ row.reason }}</div>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>
</template>

<script lang="ts" >
export default {
    name: 'BulkOperation'
}
</script>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
const dialogVisible = ref(true)
const props = defineProps(['params'])
const emits = defineEmits(['dialogClose'])
const loading = ref(false)
const closeDialog = () => {
    dialogVisible.value = false
    emits('dialogClose')
}

const getResult = async () => {
    loading.value = true
    try {
        await Promise.all(props.params.data.map( async (item: any) => {
            try {
                await props.params.apiFn(item[props.params.paramsField])
                item.status = '成功'
            } catch (error) {
                item.status = '失败'
                item.reason = error
            }
        }))
        loading.value = false
    } catch (error) {
        loading.value = false
    }
} 
onMounted(() => {
    getResult();
})
</script>

<style scoped>

</style>